function Tab(el) {
    // this === tab1/tab2

    // 保存最大的盒模型&常用的一些属性数据（当两个及以上原型方法中使用了同一个属性就可以到保存到这里面）
    this.el = document.querySelector(el)

    // 启动插件
    this.init()
}

// this 功能 
// 标题鼠标移入
Tab.prototype.init = function() {
    this.titleOver()
}


Tab.prototype.titleOver = function() {
    // 获取当前盒模型里面所有标题也就是ul li 标签
    let ulLiObjs = this.el.querySelectorAll('ul li')
    // 遍历
    ulLiObjs.forEach((item,i) => {
        // 绑定鼠标移入事件
        item.onmouseover = () => {
            // 同步标题
            this.tbTitle(ulLiObjs,i)
            // 同步内容
            this.tbContent(i)  
        }
    });
}

// 同步标题
Tab.prototype.tbTitle = function(ulLiObjs,i) {
    // 清空
    this.el.querySelector('ul li.active').className = ''
    // 获取
    ulLiObjs[i].className = 'active'
}


 // 同步内容
Tab.prototype.tbContent = function(i) {
    // 清空
    this.el.querySelector('ol li.active').className = ''
    // 获取当前盒模型里所有内容也就是ol li 标签
    let olLiObjs = this.el.querySelectorAll('ol li')
    // 获取
    olLiObjs[i].className = 'active'
}